<template>
  <div id="app">
       <div class="box">
		<div class="lottery">
      <div class="block" v-for="item in goods" >
        <div class="content">
					<img class="img" :src="item.pic" />
					<div class="text">{{item.name}}</div>
				</div>
      </div>
		</div>
    <img src="./assets/point.png" alt="" class="point"  @click="start" ref="point"  >
	</div>
    </div>
</template>
<script>
const GRID_NUM = 8;
export default {
  name: "name",
  components: {},
  computed:{
    
  },
  mounted(){
     
  },
  data() {
    return {
      singleAngle:360/GRID_NUM,
      normalRound:4,
      count:0,
       goods:[
           {name:'电脑',pic:'https://2f.zol-img.com.cn/product/193_160x120/873/ce2MbzyykB6o.jpg'},
           {name:'谢谢参与',pic:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4074694696,3447224297&fm=200&gp=0.jpg'},
           {name:'相机',pic:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1682092105,2103490467&fm=26&gp=0.jpg'},
           {name:'谢谢参与',pic:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4074694696,3447224297&fm=200&gp=0.jpg'},
           {name:'xBox',pic:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3354967965,183170812&fm=26&gp=0.jpg'},
           {name:'谢谢参与',pic:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4074694696,3447224297&fm=200&gp=0.jpg'},
           {name:'手机',pic:'//img.alicdn.com/imgextra/i2/872196368/O1CN0130IW4q1wuaduK32kn_!!872196368.jpg_60x60q90.jpg'},
           {name:'谢谢参与',pic:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4074694696,3447224297&fm=200&gp=0.jpg'},
       ]
    };
  },
  methods: {
      start(){
        let {singleAngle,normalRound} =this;
        let count = this.getRandomInt(0, 7);
        let endAddAngle =normalRound*360+count*singleAngle+singleAngle/2;
        this.$refs.point.style['transform']=`rotate(${endAddAngle}deg)`
        this.count =count
        this.tip()
      },
      getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
 
      },
      tip(){
        let {goods,count}=this;

       let msg=goods[count].name =='谢谢参与'?`很遗憾没有中奖下次再试吧`:`恭喜获得${goods[count].name} *1`;
       this.timer=setTimeout(()=>{
         alert(msg)
         window.location.reload()
       },3500)
      }
  },
  destroyed(){
    this.timer&&clearTimeout(timer)
  }
};
</script>
<style lang="scss" >
$bondNum:8;
.box {
	width: 600px;
	height: 600px;
	background-color: #feea95;
	border-radius: 50%;
	margin: 30px auto;
  position: relative;
	padding: 20px;
}
.lottery {
	width: 600px;
	height: 600px;
	margin: 0 auto;
	border-radius: 50%;
	overflow: hidden;
	  position: relative;
	background-color: #cb9035;
  border: 4px solid #e7915f;
	box-shadow: 0 0 20px #ce6225;
}
.block {
	position: absolute;
	width: 300px;
	height: 300px;
	transform-origin: 100% 100%;
     display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  &:nth-child(odd) {
	background-color: #ffee9b;
}
  &:nth-child(even) {
	background-color: #fffae4;
}
    @for $i from 1 through $bondNum {
     &:nth-child(#{$i}) {  transform:rotate((360/$bondNum)*($i)+deg) skewY((360/$bondNum)+deg); 
      color: rgb(255/$i, 255/$i, 255/$i);
    }
    }
}
.content {
	transform-origin: 50% 50%;
	transform: skewY(-(360/$bondNum)+deg) rotate(-(360/$bondNum/2)+deg) ;
  margin-right: 40px;
  margin-bottom: 40px;
  box-sizing: border-box;
  align-self:flex-end;
  .img {
  margin: 0 auto;
	width: 100px;
	height: 100px;
  object-fit: contain;
}
.text {
  text-align: center;
	font-size: 16px;
	margin: 0 auto;
}
}
.point{
  position: absolute;
  top: 50%;
  left:50%;
  width: 150px;
  height: 238px;
  margin-left: -75px;
  margin-top: -119px;
  transform-origin: 50% 59%;
  transition: all 3s ease-in; 
}
</style>
